<template>
  <el-form-item :label="name">
    <el-popover
      v-model="visiable"
      placement="bottom-start"
      trigger="focus"
    >
      <template #default>
        <!--    搜索框    -->
        <el-input
          v-model="searcher.name"
          class="mb-10"
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
        />
        <el-table
          ref="multipleTable"
          v-loading="loading"
          class="mb-10"
          :data="data"
          tooltip-effect="dark"
          row-key="code"
          style="width: 100%"
          @row-click="handleRowClick"
        >
          <el-table-column
            label="code"
            width="120"
            prop="code"
          />
          <el-table-column
            prop="name"
            label="名称"
            width="120"
          />
        </el-table>
        <el-pagination
          background
          layout="prev, pager, next ,total"
          :current-page.sync="pagination.pageNo"
          :page-size="pagination.pageSize"
          :total="pagination.total"
          @current-change="pageChange"
        />
      </template>
      <template #reference>
        <el-input v-model="result" size="small" class="item" />
      </template>
    </el-popover>
  </el-form-item>
</template>
<script>
import { findPage } from '@/api/ik/data/dataApi'

export default {
  props: {
    url: { type: String, default: 'health/content/label/contentlabel' }, // API请求的URL
    value: { type: String, default: "" }, // 默认的选中标签
    name: { type: String, default: "" }
  },
  data() {
    return {
      loading: false,
      searcher: { name: '' }, // 搜索框内容
      data: [], // 表格数据
      pagination: { pageSize: 5, pageNo: 1, total: 0 }, // 分页信息
      result: "",
      visiable: false
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    // 获取表格数据
    getData(page = 1) {
      this.loading = true // 开始加载数据
      findPage(this.url, this.searcher, this.pagination.pageSize, page)
        .then(res => {
          this.pagination.total = res.data.totalCount // 设置总条数
          this.data = res.data.list // 设置表格数据
        })
        .finally(() => {
          this.loading = false
        }) // 结束加载数据
    },
    /**
     * 翻页
     * @param page
     */
    pageChange(page) {
      this.getData(page) // 请求对应页的数据
    },
    /**
     * 行被点击
     * @param row
     */
    handleRowClick(row) {
      this.$emit("input", String(row.id))
      this.result = row.name
      this.visiable = false
    }
  }
}
</script>
<style scoped>
::v-deep.require > .el-input__inner {
  border: red 1px solid;
}

.item {
  width: calc(100% - 30px)
}
</style>
<style lang="scss" scoped>
.tag-wrapper {
  min-height: 24px;
  max-width: 295px;
  flex-wrap: wrap;
}

.el-form-item {
  margin-bottom: 12px;
  width: 100%;
}

.el-form-item__label {
  width: 180px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.el-form-item__content {
  width: calc(100% - 180px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
